<template>
  <div class="background">
    <div class="login_warp">
      <div class="first_part">
        <!-- <img src="../assets/img/title.png" class="title"> -->
        <div class="title">M · S · Tick</div>
      </div>
      <div class="second_part">
        <el-form ref="loginFormRef" :model="loginInfo" label-position="top" :rules="formRules" label-width="100px" class="loginForm">
          <el-form-item label="Email" prop="email">
            <el-input v-model="loginInfo.email">
            </el-input>
          </el-form-item>
          <el-form-item label="Password" prop="password">
            <el-input v-model="loginInfo.password"
                      show-password>
            </el-input>
          </el-form-item>
          <el-form-item prop="rememberMe">
            <el-checkbox label="remember me" v-model="loginInfo.rememberMe"></el-checkbox>
            <el-button type="text" class="forget" @click="forgetDetails">Forgot Password?</el-button>
          </el-form-item>
        </el-form>
        <div class="second-button">
          <el-button type="primary" @click="loginClick">Log In</el-button>
        </div>
      </div>
    </div>
    <div id="circle1"></div>
    <div id="circle2"></div>
    <div id="circle3"></div>
    <div id="circle4"></div>
    <div id="circle5"></div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    var checkEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('Email is required'));
      } else {
        const reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-zd]{2,5}$/
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error('Please enter the correct email'));
        }
      }
    };
    let validPassword=(rule,value,callback)=>{
      if (!value){
        return callback(new Error('Password is required'))
      } else {
        callback()
      }
    };
    return {
      loginInfo: {
        email: '123@admin.com',
        password: '123456',
        rememberMe: false,
      },
      formRules: {
        email: [
          {validator: checkEmail, trigger: 'blur'}
        ],
        password: [
          // { required: true, message: 'Please enter your password', trigger: ['blur'] },
          { validator: validPassword, trigger: 'blur' }
        ],
      },
    }
  },
  methods: {
    forgetDetails() {
      const _this = this;
      _this.$router.push('/forget');
    },
    loginClick() {
      const _this = this;
      console.log(this);
      _this.$refs.loginFormRef.validate(valid => {
        if(!valid) return;
        _this.$api.login.managerLogin({
          emailaddress: _this.loginInfo.email,
          password: _this.loginInfo.password
        }).then(res => {
          if (res.data.code === 2000) {
            sessionStorage.setItem('Authorization', res.data.data);
            _this.$api.login.weblogincheck().then(res => {
              if (res.data.code === 2000){
                _this.$api.staff.getUserInfo({
                  email: _this.loginInfo.email
                }).then(res => {
                  if (res.data.code === 2000){
                    sessionStorage.setItem('user', JSON.stringify(res.data.data));
                    // _this.getAllStaff();
                    // _this.getAllDepartment();
                    _this.getRoster();
                    _this.getClockSituation(res.data.data.number);
                    // _this.$message.success('Login successful');
                    // _this.$router.push('/today');
                  }else{
                    _this.$message.error('No Access');
                  }
                }).catch(err => {
                  console.log(err);
                })
              }else{
                sessionStorage.removeItem('Authorization');
                _this.$message.error('No Access');
              }
            }).catch(err => {
              console.log(err);
            })
          } else {
            _this.$message.error('Login failed');
          }
        }).catch(err => {
          console.log(err);
        })
      })
    },
    getAllStaff(){
      const _this = this
      _this.$api.staff.getAllStaff().then(res => {
        if (res.data.code === 2000) {
          // _this.staffData = res.data.data;
          // _this.sortPosition(_this.staffData)
          sessionStorage.setItem('staffData',JSON.stringify(res.data.data));
          let managerData = _this.staffData.filter((item) => {
            return item.position != 'Staff'
          })
          sessionStorage.setItem('managerData',JSON.stringify(managerData));
        } else {
          _this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.log(err);
      })
    },
    getAllDepartment() {
      const _this = this
      _this.$api.department.getAllDepartment().then(res => {
        if (res.data.code === 2000) {
          sessionStorage.setItem('department',JSON.stringify(res.data.data));
        } else {
          _this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.log(err);
      })
    },
    getClockSituation(num) {
      const _this = this;
      // console.log(val);
      // console.log('_this.nowDate:' + Math.round(_this.nowDate / 1000));
      let arr = {
        startTime: Math.round(new Date().valueOf() / 1000),
        finishTime: Math.round(new Date().valueOf() / 1000)
      };
      _this.$api.clock.getClockSituation(num, arr).then(res => {
        if(res.data.code === 2000){
          sessionStorage.setItem('clockSituation',JSON.stringify(res.data.data));
          // _this.department = res.data.data;
          _this.$message.success('Login successful');
          _this.$router.push('/today');
        } else {
          _this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.log(err);
      })
    },
    getRoster(){
      const _this = this;
      var day = _this.getDate(new Date());
      _this.$api.arrange.getWeekArrange({
        number: 0,
        departmentid: 0,
        managernumber: 0,
        date: day,
      }).then(res => {
        if(res.data.code === 2000){
          sessionStorage.setItem('weekday',JSON.stringify(res.data.data));
          // _this.weekday = res.data.data;
        } else {
          _this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.log(err);
      })
    },
    getDate(date){
      var date = new Date(date);
      var YY = date.getFullYear() + '-';
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
      return YY + MM + DD;
    },
  }
}
</script>

<style lang="less" scoped>
  .background {
    background-color: rgb(243,238,232);
    background-size: 100% 100%;
    height: 100%;
    position: fixed;
    width: 100%
  }

  .login_warp {
    width: 750px;
    height: 450px;
    border: 2px solid rgba(253, 167, 105,0.5);
    border-radius: 5px;
    background-color: rgba(254, 200, 104,0.24);
    position: relative;
    margin: 0 auto;
    margin-top: 10%;
  }

  .first_part {
    width: 100%;
    text-align: center;
    height: 50px;
    .title {
      display: inline-flex;
      align-items: center;
      height: 50px;
      font-size: 50px;
      color: #473C33;
      margin-top: 50px;
    }
    // .title {
    //   height: 75px;
    //   margin-top: 40px;
    // }
  }

  .second_part {
    width: 300px;
    margin: 0 auto;
    margin-top: 60px;
    /deep/ .el-form-item {
      margin-bottom: 5px;
    }
    /deep/ .el-form-item__label {
      padding-bottom: 0px;
    }
  }

  .forget {
    float: right;
    color: #409EFF;
  }

  .second-button {
    width: 300px;
    margin: 0 auto;
    margin-top: 10px;
    text-align: center;
    /deep/ .el-button {
      width: 300px;
      height: 40px;
      border-radius: 4px;
      font-size: 14px;
    }
  }

  #circle1 {
    border-width: 1px;
    position: absolute;
    left: -88px;
    top: -50px;
    width: 260px;
    height: 260px;
    display: flex;
    border-radius:50%;
    background-color: rgba(150,169,97,0.8)
  }

  #circle2 {
    border-width: 1px;
    position: absolute;
    left: 130px;
    top: 0px;
    width: 80px;
    height: 80px;
    display: flex;
    border-radius:50%;
    background-color: rgba(150,169,97,0.8)
  }

  #circle3 {
    border-width: 1px;
    position: absolute;
    left: 1100px;
    top: 110px;
    width: 100px;
    height: 100px;
    display: flex;
    border-radius:50%;
    background-color: rgba(150,169,97,0.8)
  }

  #circle4 {
    border-width: 1px;
    position: absolute;
    left: 300px;
    top: 500px;
    width: 180px;
    height: 180px;
    display: flex;
    border-radius:50%;
    background-color: rgba(253,167,105,0.5)
  }

  #circle5 {
    border-width: 1px;
    position: absolute;
    left: 1321px;
    top: 600px;
    width: 140px;
    height: 140px;
    display: flex;
    border-radius:50%;
    background-color: rgba(253,167,105,0.5)
  }
</style>
